<template>
    <div class="DataTable">
      <home-content>
        <template #table-title>
          今日通话概览
          <el-button size="mini" class="mini-button" @click="getData"><span style="color:#767E91"><i class="V7_iconV7tubiao_shuaxin V7_iconfont" style="font-size:12px;"></i>刷新</span></el-button>
        </template>
        <template #table-content>
          <div class="node-content">
            <div class="table-item">
                <div class="table-left"><i class="V7_iconV7tubiao_huru V7_iconfont"></i></div>
                <div class="table-right">
                  <div class="right-title">今日呼入总数
                    <el-tooltip placement="top">
                      <template slot="content">
                        <TooltipTable :trs="callIn"></TooltipTable>
                      </template>
                      <i class="V7_iconV7tubiao_bangzhu-42 V7_iconfont"></i>
                    </el-tooltip>
                  </div>
                  <div class="right-number">{{tableData.incomingRing || 0}}</div>
                  <div class="right-detail" style="margin-top:16px">呼入振铃未接听数<span>{{tableData.incomingAgentNoAnswer || 0}}</span></div>
                  <div class="right-detail">呼入接通数<span>{{tableData.incomingAnswered || 0}}</span></div>
                  <div class="right-detail">呼入接通率<span>{{tableData.incomingAnsweredRate || '0.0'}}%</span></div>
                  <div class="right-detail">呼入通话平均时长<span>{{tableData.avgIncomingCallDuration || '00:00:00'}}</span></div>
                </div>
            </div>
            <div class="table-item">
                <div class="table-left linear-other"><i class="V7_iconV7tubiao_tonghua V7_iconfont"></i></div>
                <div class="table-right">
                  <div class="right-title">今日外呼总数
                    <el-tooltip placement="top">
                      <template slot="content">
                        <TooltipTable :trs="callOut"></TooltipTable>
                      </template>
                      <i class="V7_iconV7tubiao_bangzhu-42 V7_iconfont"></i>
                    </el-tooltip>
                  </div>
                  <div class="right-number">{{tableData.outgoingCount || 0}}</div>
                  <div class="right-detail" style="margin-top:16px">外呼失败数<span>{{tableData.outgoingFailed || 0}}</span></div>
                  <div class="right-detail">外呼接通数<span>{{tableData.outgoingAnswered || 0}}</span></div>
                  <div class="right-detail">外呼接通率<span>{{tableData.outgoingAnsweredRate || '0.0'}}%</span></div>
                  <div class="right-detail">外呼通话平均时长<span>{{tableData.avgOutgoingCallDuration || '00:00:00'}}</span></div>
                </div>
            </div>
          </div>
        </template>
      </home-content>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator';
import HomeContent from './HomeContent.vue'
import TooltipTable from './TooltipTable.vue'
import { reverseNumber, getTime } from './home'
import { commonAction } from '@/utils/common';
@Component({
  name: 'DataTable',
  components: {
    HomeContent,
    TooltipTable
  }
})
export default class DataTable extends Vue {
  private $store: any

  private callIn: any = [
    ['今日呼入总数', '拨打电话进入系统的呼叫总数量，包括进入系统接通的数量和进入系统未接通产生的呼损量'],
    ['呼入振铃未接听数', '拨打电话进入系统由人工座席接待，座席振铃但最终没有接起的通话总次数'],
    ['呼入接通数', '拨打电话进入系统，座席成功接听，实现双向通话的用户呼入总数量'],
    ['呼入接通率', '呼入接通总数/呼入总数*100%'],
    ['呼入通话平均时长', '呼入通话总时长/呼入接通数']
  ]

  private callOut: any = [
    ['今日外呼总数', '座席通过系统主动外呼的通话次数。包括成功接听的和呼叫失败的总次数'],
    ['外呼失败数', '座席外呼失败的次数，包括座席未接听和客户号码异常的通话总次数。失败原因有：空号、停机、关机、超出服务区、无人接听、遇忙、关机、国际漫游等'],
    ['外呼接通数', '座席外呼后，被叫摘机通话的通话总次数'],
    ['外呼接通率', '呼出接通数/呼出数*100%'],
    ['外呼通话平均时长', '外呼通话总时长/呼出接通数']
  ]

  private tableData: any = {}

  get freshTime () {
    return this.$store.state.cti.currentStatusObj
  }

  @Watch('freshTime')
  private freshTimeChange (newData: number) {
    setTimeout(() => {
      this.getData()
    }, 1000)
  }

  private async getData () {
    const params = { url: '/report/agent/dailyWorkload', method: 'GET', data: { agentId: this.$store.state.common.session.user._id } }
    const data: any = await commonAction(params)
    if (data.success) {
      const res = data.data[0]
      this.tableData = {
        incomingRing: reverseNumber(res.incomingRing),
        incomingAnswered: reverseNumber(res.incomingAnswered),
        incomingAgentNoAnswer: reverseNumber(res.incomingAgentNoAnswer),
        outgoingCount: reverseNumber(res.outgoingCount),
        outgoingAnswered: reverseNumber(res.outgoingAnswered),
        outgoingFailed: reverseNumber(res.outgoingFailed),
        incomingAnsweredRate: (res.incomingAnsweredRate * 100).toFixed(2),
        outgoingAnsweredRate: (res.outgoingAnsweredRate * 100).toFixed(2),
        avgIncomingCallDuration: getTime(res.avgIncomingCallDuration),
        avgOutgoingCallDuration: getTime(res.avgOutgoingCallDuration)
      }
    }
  }

  public mounted () {
    this.getData()
  }

  public activated () {
    this.getData()
  }
}
</script>

<style lang="stylus" scoped>
.DataTable
    width: 100%
    .node-content
      display: flex
      justify-content: space-between
      .table-item
        width 370px
        height 194px
        background #F6F9FC
        border-radius 10px
        display: flex
        .table-left
          width 66px
          height 66px
          background linear-gradient(90deg, #49ACF3, #1897F1)
          border-radius 10px
          line-height 66px
          text-align center
          margin 16px 0px 0px 16px
          i
            font-size: 20px
            color: #fff
        .linear-other
          background: linear-gradient(90deg, #7FE398, #2ED47A);
        .table-right
          padding: 16px
          flex: 1
          .right-title
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #767E91;
            margin-bottom: 10px
            i
              font-size:12px
              float: right
              cursor:pointer
              color:#B3B9C7
          .right-number
            font-size: 24px;
            font-family: PingFang SC;
            font-weight: bold;
            color: #303753;
            padding-bottom: 16px
            border-bottom: 1px solid #E1EAF4
            margin-bottom: 5px
          .right-detail
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #767E91;
            margin-top 11px
            span
              float right
              color #303753
.tooltip-table
  border: 1px solid #DCDFE6
  font-size: 12px
  .tooltip-tr:nth-child(odd)
    background: #f6f9fc
  .tooltip-tr:last-child
    border-bottom: none
  .tooltip-tr
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #DCDFE6
    .tooltip-td
      border-left: 1px solid #DCDFE6
      padding: 8px 8px
      display: inline-block
    .tooltip-td:nth-child(1)
      width: 120px
      border-left: none
    .tooltip-td:nth-child(2)
      width: 500px
</style>
